<!--
- Author:  LiShibin.
- Date:    2018/9/17.
- File:    bankCard.
-->
<template>

  <div class="Web_Box1">
    <div class="Topmenu"><i class="iconfont icon-youjiantou" @click="back"><a href=""></a></i>
      <h1>线下体验店</h1>
      <span></span>
    </div>

    <div class="tyd_bt">
      <p>线下体验店</p>
      Offline store
    </div>

    <div class="tyd_tab phone_gdt ">
      <ul>
        <li :class="{'on': sign == item.shop_id}" @click="changeSign(item.shop_id)" v-for="item in store">{{item.shop_name}}</li>
        <!--<li :class="{'on': sign == 4}" @click="changeSign(4)">福州东街店</li>-->
        <!--<li :class="{'on': sign == 2}" @click="changeSign(2)">宁德店</li>-->
        <!--<li :class="{'on': sign == 3}" @click="changeSign(3)">厦门店</li>-->
      </ul>
    </div>
    <div class="tyd_main">
      <div class="tyd_main_left">
        ONE
      </div>
      <div class="tyd_main_right">
        <p>{{storeData.shop_address}} {{storeData.shop_name}}
        </p>
        {{storeData.shop_phone}}&nbsp;{{storeData.member_name}}
      </div>
    </div>

    <div class="tyd_main2"><img :src="$config.website + $config.storeImg + storeData.shop_image" alt=""></div>

    <div class="tyd_bt">
      <p>热销手表</p>
      Hot Watch
    </div>

    <div class="tyd_main3">
      <ul>
        <!--<li v-for="item in hotgoods" @click="gotoGoodsDetail(item.goods_id)">-->
          <!--&lt;!&ndash;<span class="tyd_main3_span">95 <p class="tyd_main3_p1">新</p></span>&ndash;&gt;-->
          <!--<div class="tyd_main3_img">-->
            <!--<img :src="item.goods_image" alt=""/>-->
          <!--</div>-->
          <!--<div class="tyd_main3_div">-->
            <!--<p class="tyd_main3_p2">{{item.goods_name}}</p>-->
            <!--<p class="tyd_main3_p3"><span style="">￥{{item.goods_price}}</span> <p class="tyd_main3_span2" style="">￥{{item.goods_marketprice}}</p></p>-->
          <!--</div>-->
        <!--</li>-->
        <li v-for="item in hotgoods" @click="gotoGoodsDetail(item.goods_id)">
          <!--<span class="left_label">95 <p>新</p></span>-->
          <div class="shangpingbiaoge_img">
            <img :src="item.goods_image" alt=""></div>
          <p class="shangpingbiaoge_name">{{item.goods_name}}</p>
          <p class="shangpingbiaoge_price"><span style="font-size: 14px;font-weight: bold">￥{{item.goods_price}}</span><span class="fr shangpingbiaoge_kucun">库存：{{item.goods_storage}}</span></p>
          <p><span class="gjck">公价参考：{{item.goods_marketprice}}</span></p>
        </li>
      </ul>
    </div>
    <div class="tyd_bt">
      <p>热销品牌</p>
      Main brand
    </div>
    <div class="tyd_main4">
      <div  v-for="item in experience" @click="getChooseClassify(item.brand_id)">
        <img :src="$config.website + $config.brandImgSrc + item.brand_images" alt=""/>
      </div>
    </div>
  </div>

</template>

<script>
  import * as validator from '../../validator'

  export default{
    beforeRouteEnter (to, from, next) {
      next()
    },
    data() {
      return {
        hotgoods: [],
        experience: [],
        from: this.$route.query.from || '',
        unionSave: {
          member_name: '',
          member_mobile: ''
        },
        payType: 0,
        store: [],
        sign: 1,
        storeData: []
      }
    },
    created() {
      this.getHotGoods(1, 4)
      this.experiences()
      this.experience_store()
    },
    methods: {
      getChooseClassify(brand_id) {
        this.$router.push({name: 'goods-list', params: {brand_id: brand_id}})
      },
      changeSign(sign) {
        this.sign = sign
        this.storeData = this.store[sign - 1]
        this.getHotGoods(1, sign - 1)
        console.log(sign)
      },
      back() {
        this.$router.push({name: 'home'})
      },
      save() {
        if (this.unionSave.member_name === '') {
          this.$toast('请输入姓名')
          return
        }
        if (!validator.phone(this.unionSave.member_mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        this.$request.addUnion(this.unionSave).then(data => {
          this.$toast('申请成功')
        })
      },
      getHotGoods(page, pageSize) {
        this.$request.getHotGoodsList(page, pageSize).then(data => {
          this.hotgoods = data
        }).finally(() => {
        })
      },
      experiences() {
        this.$request.getExperience().then(data => {
          this.experience = data
        }).finally(() => {
        })
      },
      experience_store() {
        this.$request.experience_store().then(data => {
          this.store = data
          this.storeData = this.store[0]
        }).finally(() => {
        })
      },
      gotoGoodsDetail(goodsId) {
        this.$router.push({name: 'goods-detail', params: {id: goodsId}})
      }
    }
  }
</script>
